<template>
  <div class="box">
    <div class="left-box">
      <div class="title cw">{{artInfo?.title}}</div>
      <div class="title2 cw"> </div>
      <div class="content cw" v-html="artInfo?.content"></div>
    </div>
    <div class="right-box">
      <img class="r-img" :src="artInfo.picUrl" alt="" />
    </div>
  </div>
</template>
<script lang="ts" setup>
const props = defineProps<{
  article1: number;
}>();
type TartInfo = {
  content:string;
  picUrl:string;
  title:string
}
let artInfo = ref<TartInfo>({
  content:"",
  picUrl:"",
  title:""
})
const getInfo = async() =>{
  const {data} = await useServerFetch<TartInfo>("/app-api/promotion/article/get",{
    query:{
      id:props.article1
    }
  }) as {data: TartInfo}
  if (data?.title) {
    artInfo.value = data
  }
}
onMounted(()=>{
  getInfo()
})
</script>
<style lang="stylus" scoped>
.cw{
    color: #fff;
}
.box{
    width 1080px;
    margin:0 auto;
    background: #81876F;
    display: flex;
    justify-content: space-between;
    align-items:flex-start;
    .left-box{
        min-width 50%;
        padding: 74px 66px 0 73px;
        box-sizing: border-box;
        .title{
            font-size: 30px;
            margin-bottom: 24px;
        }
        .title2{
          font-size: 30px;
          margin-bottom: 24px;
        }
        .content{
            font-size: 14px;
        }
    }
    .right-box{
      .r-img{
        width: 525px;
      }
    }
}
</style>
